import { Card, Table } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { connect } from 'dva';
import moment from 'moment';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import PateoSearchForm from '../../../components/common/PateoSearchForm';
import Ellipsis from '../../../components/Ellipsis';

const mapStateToProps = (state: any) => ({
  Color: state.color,
  loading: state.loading.effects['color/getFetchPage'],
});
class Color extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();

  static contextTypes = {
    permissions: PropTypes.array,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      formValues: {},
      visible: false,
      checkedKeys: {},
      expandedKeys: [],
      roleData: {},
      isView: false,
      isAdd: false,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'color/getFetchPage',
      payload: { url: '/basedata/color' },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'color/initData',
    });
  }
  handleTableChange = (pagination: any, filters: any) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    const { current, pageSize } = pagination;
    this.setState({ pagination });
    const params = {
      page: current - 1,
      size: pageSize,
      ...formValues,
      ...filters,
    };
    dispatch({
      type: 'color/getFetchPage',
      payload: { url: '/basedata/color', ...params },
    });
  };
  render() {
    const {
      Color: {
        pageData: { list, pagination },
      },
      loading,
    } = this.props;
    const { formValues } = this.state;
    const columns = [
      {
        title: '颜色代码',
        dataIndex: 'code',
      },
      {
        title: '颜色名称',
        dataIndex: 'name',
        render: val => (
          <Ellipsis length={10} tooltip>
            {val}
          </Ellipsis>
        ),
      },
      {
        title: '备注',
        dataIndex: 'remark',
        render: val => (
          <Ellipsis length={10} tooltip>
            {val}
          </Ellipsis>
        ),
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
        render: val => (
          <Ellipsis length={20} tooltip>
            {moment(val).format('YYYY-MM-DD HH:mm:ss')}
          </Ellipsis>
        ),
      },
    ];
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => (
        <span>共&nbsp;{pagination === undefined ? 0 : pagination.total}&nbsp;条</span>
      ),
    };

    const searchItems = [
      {
        type: 'input',
        title: '颜色名称',
        key: 'name',
      },
    ];
    return (
      <div>
        <Card bordered={false}>
          <PateoSearchForm
            searchItems={searchItems}
            fetchParams={{ type: 'color/getFetchPage', url: '/basedata/color' }}
            saveFormValues={(val: any) =>
              this.setState({ formValues: Object.assign(formValues, val) })
            }
            handleFormReset={() => this.setState({ formValues: {} })}
          />
        </Card>
        <Card style={{ marginTop: 12 }} bordered={false}>
          <Table
            size={'small'}
            rowKey={record => record.sid}
            dataSource={list}
            loading={loading}
            columns={columns}
            pagination={paginationProps}
            onChange={this.handleTableChange}
            scroll={{ x: '100%' }}
          />
        </Card>
      </div>
    );
  }
}
export default connect(mapStateToProps)(Color);
